<template>
	<view class="p20">
		<view class="br--20 bag--fff">
			<u--form labelPosition="top" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="服务标题" labelWidth="200" prop="userInfo.title" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.title" placeholder="请填写服务标题" border="none"></u--input>
				</u-form-item>
				<u-form-item label="服务分类" labelWidth="200" prop="userInfo.classification" borderBottom ref="item1">
					<view class="flex mt20 a-center" @click="fenlei">
						<span class="f16 co-c0c f1">请选择服务分类</span>
						<u-icon slot="right" name="arrow-right" class=""></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="服务地区" labelWidth="200" prop="userInfo.area" borderBottom ref="item1">
					<!-- <u--input v-model="model1.userInfo.area" placeholder="请选择服务地区" border="none"></u--input> -->
					<view class="flex mt20 a-center" @click="diqu">
						<span class="f16 co-c0c f1">请选择服务地区</span>
						<u-icon slot="right" name="arrow-right" class=""></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="收费标准" labelWidth="200" prop="userInfo.salary" borderBottom ref="item1">
					<view class="flex a-center">
						<u--input v-model="model1.userInfo.salary" placeholder="请输入收费标准" border="none"></u--input>
						<view class="flex a-center" @click="dwei">
							<view class="cgrey">
								请选择单位
							</view>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="服务描述" labelWidth="200" borderBottom prop="userInfo.content" ref="item1">
					<!-- <u--input v-model="model1.userInfo.dsyc" placeholder="请输入服务描述" border="none"
						class="mt20"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon> -->
					<view class="flex mt20 a-center" @click="miaoshu">
						<span class="f16 co-c0c f1">请输入服务描述</span>
						<u-icon slot="right" name="arrow-right" class=""></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="服务图片" labelWidth="200" prop="userInfo.images" ref="item1">
					<view class="" v-if="imageList.length<1">
						<image src="../../static/carmer.png" mode="widthFix" class="img80 br--20 mt20"
							@click="chooseImage">
						</image>
					</view>
					<view v-for="(image, index) in imageList" :key="index" class="image-item po-re">
						<image :src="image" mode="aspectFit" class="image-preview mb30" @click="previewImage(index)">
						</image>
						<view class="delete-btn" @click="deleteImage(index)">删除</view>
					</view>
					<view class="f14 co-aaa mt20">
						可上传服务或设备照片（限4张，1mb以内)
					</view>
				</u-form-item>

			</u--form>

		</view>
		<myFixedBtn>
			<view class="btns btn-1 p20 mlr20 z-min" @click="submit">
				免费发布
			</view>
		</myFixedBtn>
		<!-- 服务地区弹框 -->
		<uni-popup ref="fuwu" background-color="#fff" borderRadius="20px 20px 0px 0px" @change="change">
			<view class="popup-content">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						服务地区
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="center oy-auto mt40 mb30 " style="height:500rpx">
					<view class="pt20 pb20 co--999 bk" :class="jfacti==item.userId?'hg':''"
						v-for="(item,index) in jfjelist" :key="index" @click="jf(item,index)">
						{{item.nickName}}
					</view>
				</view>
				<view class="btn-1 but f16">确认</view>
			</view>
		</uni-popup>
		<!-- 薪资单位弹框 -->
		<uni-popup ref="danwei" background-color="#fff" borderRadius="20px 20px 0px 0px" @change="change">
			<view class="popup-content">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						薪资单位
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="center oy-auto mt40 mb30 " style="height:500rpx">
					<view class="pt20 pb20 co--999 bk" :class="danweiacti==item.userId?'hg':''"
						v-for="(item,index) in danweilist" :key="index" @click="dw(item,index)">
						{{item.nickName}}
					</view>
				</view>
				<view class="btn-1 but f16">确认</view>
			</view>
		</uni-popup>
		<!-- 服务描述弹框 -->
		<uni-popup ref="desc" background-color="#fff" borderRadius="20px 20px 0px 0px" @change="change">
			<view class="descs flex column">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						服务描述
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<!-- <view class=""> -->
				<textarea name="" placeholder="请输入您所提供的服务描述，如擅长领域、工作经验等" id="myTextarea" class="f1 mt20 f14"
					v-model="model1.userInfo.content" maxlength="5000"></textarea>
				<text id="charCount" class="color-76">{{model1.userInfo.content.length}}/5000</text>
				<!-- </view> -->
				<view class="btn-1 but f16">确认</view>
			</view>
		</uni-popup>
		<!-- 选择服务分类弹框 -->
		<uni-popup ref="type" background-color="#fff" borderRadius="20px 20px 0px 0px" @change="change">
			<view class="descs flex column">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						选择服务分类
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="f1 flex">
					<view class="">
						zuo
					</view>
					<view class="">
						you
					</view>
				</view>
				<view class="btn-1 but f16">确认</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						title: '',
						classification: '',
						area: '',
						salary: '',
						content: '',
						ayctar: '',
						service_cat_id: '',
						service_city: ''
					},
				},
				imageList: [], // 用于存储选择的图片路径列表
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				textitem: '',
				jfacti: 1,
				danweiacti: 1,
				jfjelist: [{
						userId: 1,
						nickName: "代理"
					},
					{
						userId: 2,
						nickName: "业务"
					},
					{
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 3,
						nickName: "商家"
					}, {
						userId: 4,
						nickName: "渠道"
					}
				],
				danweilist: [],
			};
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			showPop() {
				this.$refs.timePop.show();
			},
			timeChange(val) {
				console.log(val, '滤芯到期日期');
				this.defaultData.startTime = val
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.imageList, // 需要预览的图片链接列表
					current: this.imageList[index] // 当前显示图片的链接
				});
			},
			// 删除图片
			deleteImage(index) {
				this.imageList.splice(index, 1); // 从图片列表中删除指定索引的图片
			},

			// 选择图片
			chooseImage() {
				if (this.imageList.length < 1) {
					uni.chooseImage({
						count: 4, // 限制用户只能选择一张图片
						sourceType: ['album', 'camera'], // 从相册或相机选择图片
						success: async (res) => {
							console.log('res', res)
							const file = res.tempFiles[0];
							const compressedImage = await this.compressImage(file.path, 800, 800);
							const tempFilePath = this.blobToTempFilePath(compressedImage);
							let data = await this.$rqt.uploadFilePromise('/api/upload/image',
								tempFilePath)
							this.imageList = this.imageList.concat(data.imgUrl);
						}
					});
				} else {
					this.msg('最多可以上传1张')
				}

			},
			compressImage(path, maxWidth, maxHeight) {
				return new Promise((resolve, reject) => {
					const img = new Image();
					img.src = path;
					img.onload = function() {
						const canvas = document.createElement('canvas');
						let width = img.width;
						let height = img.height;
						// 计算压缩比例
						if (width > height) {
							if (width > maxWidth) {
								height *= maxWidth / width;
								width = maxWidth;
							}
						} else {
							if (height > maxHeight) {
								width *= maxHeight / height;
								height = maxHeight;
							}
						}
						canvas.width = width;
						canvas.height = height;
						const ctx = canvas.getContext('2d');
						ctx.drawImage(img, 0, 0, width, height);
						canvas.toBlob((blob) => {
							resolve(blob);
						}, 'image/jpeg', 0.8); // 压缩质量为 0.8
					};
				});
			},
			// 将 Blob 对象转换为临时文件路径字符串
			blobToTempFilePath(blob) {
				return URL.createObjectURL(blob);
			},
			diqu() {
				this.$refs.fuwu.open('bottom')
			},
			dwei() {
				this.$refs.danwei.open('bottom')
			},
			fenlei() {
				this.$refs.type.open('bottom')
			},
			miaoshu() {
				this.$refs.desc.open('bottom')
			},
			jf(item, index) {
				this.jfacti = item.userId
			},
			dw(item, index) {
				this.danweiacti = item.userId
			},
			close() {
				this.$refs.fuwu.close()
				this.$refs.danwei.close()
				this.$refs.desc.close()
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.getSalaryUnitList()
				console.log(data)
				data.forEach(item => {
					this.danweilist.push({
						userId: item.id,
						nickName: item.name,
					});
				});
			},
			async submit() {
				// let data = await this.$rqt.serviceadd({
				// 	type: '',
				// 	title: this.model1.userInfo.title,
				// 	service_cat_id: '',
				// 	service_city: '',
				// 	salary: this.model1.userInfo.salary,
				// 	salary_unit: '',
				// 	content: this.model1.userInfo.content,
				// 	images: this.imageList,
				// 	num: ''
				// })
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},

	};
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		// background: #fff;
		padding: 10rpx 20rpx;
	}

	::v-deep input {
		margin-top: 20rpx;
	}

	::v-deep .u-input {
		justify-content: right !important;
		text-align: right !important;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	.image-preview {
		width: 200rpx;
		height: 200rpx;
		border-radius: 40rpx;
		margin-right: 21rpx;
		margin-left: 10rpx;
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 21rpx;
		background: #666;
		// opacity: ;
		color: #fff;
		font-size: 30rpx;
		padding: 10rpx;
		border-radius: 0 40rpx 0 0;
	}


	.popup-content {
		border-radius: 40rpx 40rpx 0 0 !important;
		padding: 20rpx;
		height: 698rpx;



		.bk {
			border-top: 2rpx solid #f5f5f5;
		}

		.hg {
			color: #0256FF;
		}

		.but {
			padding: 22rpx;
		}
	}

	.descs {
		border-radius: 40rpx 40rpx 0 0 !important;
		padding: 20rpx;
		height: 996rpx;

		.texta {
			margin-top: 52rpx;
			position: relative;
		}

		.bk {
			border-top: 2rpx solid #f5f5f5;
		}

		.hg {
			color: #0256FF;
		}

		.but {
			padding: 22rpx;
		}

		#myTextarea {
			width: 100%;
			// background-color: #666;
			position: relative;
		}

		#charCount {
			position: absolute;
			right: 20rpx;
			bottom: 150rpx;
			color: #c0c0c0;
		}
	}
</style>